import React, { useEffect, useRef, useState } from 'react'
import './HeroList.css';
import axios from 'axios';
import { Link, useNavigate } from 'react-router-dom';

export default function HeroList() {
  //声明一个状态
  let [heros, setHeros] = useState([]);
  let [v, setV] = useState();
  //是否是第一个调用
  let [isFirst, setIsFirst] = useState(true);
  //是否为加载中状态
  let [isLoading, setIsLoading] = useState(false);
  //声明 ref 
  let input = useRef();

  //组件挂载完毕后自动执行
  useEffect(() => {
    //判断是否为第一个调用
    if(isFirst) return;
    //发送 AJAX 请求
    async function getHeros(){
      //发送请求之前 改变 isLoading 状态
      setIsLoading(true);
      
      //根据用户输入的关键字进行搜索
      let result = await axios.get('http://api.xiaohigh.com/heros', {
        params: {
          name_like: v
        }
      });
      //发送请求之后, 更新状态
      setHeros(result.data);
      setIsLoading(false);
    }
    getHeros();
  }, [v]);

  //声明函数
  let search = async () => {
    //获取关键字
    let value = input.current.value;
    //更新状态 v 的值
    setV(value);
    //更新 isFirst 的状态
    setIsFirst(false);
  }

  //获取 navigate 函数
  let navigate = useNavigate();

  return (
    <div className='hero-container'>
      <h1>英雄列表 <button onClick={() => {
          navigate(1);
        }} className='btn btn-xs btn-md btn-primary'>前进</button></h1>
      <hr />
      <div className='search'>
        <input type="text" ref={input}  /><button onClick={search}>搜索</button>
      </div>
      <hr />
      {/* 控制欢迎语 */}
      {isFirst && <h2 style={{textAlign: 'center'}}>欢迎来到王者荣耀</h2>}
      {/* 控制加载中... loading 效果 */}
      {isLoading && <h2 style={{textAlign: 'center'}}>加载中...</h2>}
      <div className="hero-list">
        {
          !isLoading && heros.map(item => {
            return <div className="hero-item" key={item.id}>
                    <img onClick={() => {
                      // 
                      // window.location.href = '/hero/' + item.id;
                      //页面的无刷新跳转
                      navigate(`/hero/${item.id}`); // params 参数
                      // navigate(`/hero?id=${item.id}`); //query 参数
                      // navigate('/hero', {   //state 参数
                      //   state: {
                      //     id: item.id
                      //   }
                      // })

                    }} width="100%" src={'http://cdn.xiaohigh.com' + item.image} alt="" />
                    <p>{item.name}</p>
                  </div>
          })
        }
      </div>
    </div>
  )
}
